import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('堆叠布局'),
        ),
        body: ZeroStack(),
        // StackAndAlign(),
      ),
    );
  }
}

class ZeroStack extends StatelessWidget {
  const ZeroStack({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: Text('hello\n heloo'),
        ),
      ],
    );
  }
}


// Stack结合Positioned定位
class StackAndPosition extends StatelessWidget {
  const StackAndPosition({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.center,
      // 没有定位信息且不是Positioned的组件在父布局中所占位置，expand表示占满父控件
      fit: StackFit.expand,
      // 子元素大小超出父元素,子元素显示方式
      overflow: Overflow.visible,
      children: [
        // 绿色边框，没有定位信息fit为expand 占满父布局 别的View网上堆叠
        Container(
          child: null,
          color: Colors.green,
        ),
        // 白色背景 ,Positioned描述控件定位信息
        Positioned(
          child: Container(
            child: null,
            color: Colors.white,
          ),
          top: 10.0,
          left: 10.0,
          bottom: 10.0,
          right: 10.0,
        ),

        // 居中的图标
        // 没有定位信息按照 alignment: AlignmentDirectional.center居中显示
        Positioned(
          child: Icon(Icons.home),
        ),

        // 水平居中文本
        Positioned(
          top: 0.0, // 在顶部配合alignment属性，水平居中
          child: Text('我在顶部'),
        ),
        // 左垂直居中
        Positioned(
          child: Text(
            '我在左边',
            style: TextStyle(background: Paint()..color = Colors.yellow),
          ),
          left: 0.0,
        ),

        Positioned(
          child: Text('我在底部'),
          bottom: 20.0,
        ),
        Positioned(
          child: Text('我在右边'),
          right: 20.0,
        )
      ],
    );
  }
}

//Stack组件会让所有的子组件按照同样的对齐方式，没法做特例，这时候就需要配合Align组件使用
class StackAndAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 250,
        height: 250,
        color: Colors.pink,
        child: Stack(
          // 指定从什么位置开始排布子元素
          alignment: AlignmentDirectional.bottomEnd,
          // 子元素拉伸方式
          fit: StackFit.expand,
          children: <Widget>[
            // 充满整个父控件
            Align(
              alignment: Alignment.topLeft,
              // 大小因子，可以缩放child大小，间接缩放Align
              widthFactor: 10,
              heightFactor: 10,
              child: Text("我在左上角"),
            ),
            Align(
              alignment: Alignment(1, -1),
              child: Text("我在右上角"),
            ),
            Align(
              alignment: Alignment.center,
              child: Text("我在中间"),
            ),
            Align(
              alignment: Alignment(1, 1),
              child: Text("我在右下角"),
            ),
          ],
        ),
      ),
    );
  }
}

//后面声明的组件覆盖到前面之上
class StackBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        //子元素对齐方式
        //alignment: Alignment.bottomRight,
        //对齐方式使用方式二,实例化Alignment传入-1~1的数 (0,0)位于中间
        alignment: Alignment(0, 0),
        children: <Widget>[
          Container(
            color: Colors.red,
            width: 200,
            height: 200,
          ),
          Text(
            "hello stack",
            style: TextStyle(
              color: Colors.amber,
              fontSize: 20,
            ),
          ),
        ],
      ),
    );
  }
}
